/** * @Description: 账单汇总 * @author */
<template>
	<view class="billSummary">
		<u-sticky z-index="10000">
			<!-- 日期查询 -->
			<calendar :mode="range" @changeCalendar="changeCalendar($event)"></calendar>

			<!-- 筛选 -->
			<tabs bg-color="#b0b8c7" @tabsChange="tabsChange($event)"></tabs>
		</u-sticky>

		<!-- 账单 -->
		<view class="order" v-if="records.length">
			<view class="orderCard" v-for="(items, idxs) of records" :key="idxs">
				<view class="orderHeader">
					<view class="orderHeaderItem">订单号：{{items.code}}</view>
					<view class="orderHeaderItem">昵称：{{items.mname}}</view>
					<view class="orderHeaderItem">联系人名：{{items.mrname}}</view>
					<view class="orderHeaderItem">联系方式：{{items.mphone}}</view>
					<view class="orderHeaderItem">
						下单时间：{{formDate(new Date(items.xdtm)) + " " + formTime(new Date(items.xdtm))}}
					</view>

					<view class="orderHeaderItem">
						<template v-if="items.paytm">
							支付时间：{{formDate(new Date(items.paytm)) + " " + formTime(new Date(items.paytm))}}
						</template>
						<template v-else>
							支付时间：暂无
						</template>
					</view>

					<view class="orderHeaderItem">
						<template v-if="items.jdtm">
							接单时间：{{formDate(new Date(items.jdtm)) + " " + formTime(new Date(items.jdtm))}}
						</template>
						<template v-else>
							接单时间：暂无
						</template>
					</view>

					<view class="orderHeaderItem">
						<template v-if="items.pstm">
							配送时间：{{formDate(new Date(items.pstm)) + " " + formTime(new Date(items.pstm))}}
						</template>
						<template v-else>
							配送时间：暂无
						</template>
					</view>

					<view class="orderHeaderItem">配送费：{{items.sendcost}}元</view>
					<view class="orderHeaderItem">订单金额：{{items.ordercost}}元</view>
					<view class="orderHeaderItem">总计：{{items.ordercosts}}元</view>

					<view class="btns">
						<!-- <u-button class="btn" type="error" size="mini" @click="showDeliveryModal(items)">查看配送</u-button> -->
					</view>
				</view>

				<view class="orderContainer">
					<view class="orderList" v-for="(item,idx) of items.orderitms" :key="idx">

						<!-- 图片 -->
						<image class="img" :src="imgUrl(JSON.parse(item.exptxt).content.main.pic)"></image>

						<!-- 内容 -->
						<view class="orderListBox">

							<!-- 标题 -->
							<view class="orderListTitle">{{JSON.parse(item.exptxt).title}}</view>

							<!-- 主菜 -->
							<view class="orderListItem" v-if="!JSON.parse(item.exptxt).content.side.id && 
								!JSON.parse(item.exptxt).content.vegetables.id && 
								!JSON.parse(item.exptxt).content.staple.id && 
								!JSON.parse(item.exptxt).content.other.length">
								<template v-if="JSON.parse(item.exptxt).content.main.description">
									主菜：{{JSON.parse(item.exptxt).content.main.title}} + {{JSON.parse(item.exptxt).content.main.description}}
								</template>
								<template v-else>
									主菜：{{JSON.parse(item.exptxt).content.main.title}}
								</template>
							</view>
							<view class="orderListItem" v-else>
								主菜：{{JSON.parse(item.exptxt).content.main.title}}
							</view>

							<!-- 副菜 -->
							<view v-if="JSON.parse(item.exptxt).content.side.id" class="orderListItem">
								副菜：{{JSON.parse(item.exptxt).content.side.title}}
							</view>

							<!-- 青菜 -->
							<view v-if="JSON.parse(item.exptxt).content.vegetables.id" class="orderListItem">
								青菜：{{JSON.parse(item.exptxt).content.vegetables.title}}
							</view>

							<!-- 小食 -->
							<view v-if="JSON.parse(item.exptxt).content.staple.id" class="orderListItem">
								小食：{{JSON.parse(item.exptxt).content.staple.title}}
							</view>

							<!-- 其他 -->
							<view class="orderListItem" v-if="JSON.parse(item.exptxt).content.other.length">
								其他：
								<text v-for="(otherItem,otherIdx) of JSON.parse(item.exptxt).content.other" :key="otherIdx">
									{{otherItem.title + ' '}}
								</text>
							</view>

						</view>
					</view>
				</view>
			</view>

			<!-- 加载更多 -->
			<u-loadmore :status="status" />
		</view>

		<template v-else>
			<view class="empty">空空如也~</view>
		</template>

		<!-- 总计 -->
		<view class="total">
			<view class="totalItem">全部配送费：{{sordercost}}元</view>
			<view class="totalItem">全部订单金额：{{ssendcost}}元</view>
			<view class="totalItem">全部总计：{{sordercosts}}元</view>
		</view>

		<!-- loading -->
		<wyb-loading ref="loading" />
	</view>
</template>

<script>
	import * as api from '@/api/apiList/user/billSummary.js';
	import {
		formDate
	} from "@/utils/formDate.js"
	import {
		formTime
	} from "@/utils/formTime.js"

	import calendar from "@/components/calendar.vue"
	import tabs from "./components/tabs.vue"

	export default {
		components: {
			calendar,
			tabs
		},
		data() {
			return {
				dateRange: { //日期范围
					sday: formDate(new Date()), //开始日期
					eday: formDate(new Date()), //结束日期
				},
				type: 0, //全部、午餐1、晚餐2
				current: 1, //第几页
				records: [], //订单列表
				current: 1, //第几页
				pages: 0, //共有多少页
				status: "loadmore", //loading状态
				sordercost:0,//总套餐
				ssendcost:0,//总配送
				sordercosts:0//总价
			};
		},
		watch: {
			dateRange: { //监听日期范围
				handler() {
					this.init()
				},
				immediate: true,
				deep: true
			},
			type: { //监听类型
				handler() {
					this.init()
				},
				immediate: true,
				deep: true
			}
		},
		methods: {
			async API_leaderlist(sday, eday, current,type) { //账单汇总接口
				let result = {
					"page": {
						current,
						size: 5
					},
					"param": {
						sday, //开始日期
						eday, //结束日期
						type, //全部、午餐1、晚餐2
						state: "4" //账单状态 1、待支付、2待接单，3，已接单，4，已配送
					}
				}
				return await api.leaderlist(result)
			},
			async init() { //初始化
				this.$nextTick(() => {
					this.$refs.loading.showLoading() // 显示
				})
				let res = await this.API_leaderlist(this.dateRange.sday, this.dateRange.eday, 1,this.type)
				console.log(res)
				if (res.data.code === 1000) {
					this.records = res.data.data.leaderlist.records //订单数据
					this.current = res.data.data.leaderlist.current //当前第几页
					this.pages = res.data.data.leaderlist.pages //共有多少页
					
					this.sordercost = res.data.data.sordercost//总套餐
					this.ssendcost = res.data.data.ssendcost//总配送
					this.sordercosts = res.data.data.sordercosts//总价
				}

				this.$refs.loading.hideLoading() // 隐藏
			},
			changeCalendar(val) { //更改日期
				console.log(val)
				this.dateRange = val
			},
			tabsChange(val) { //更改筛选
				this.type = val
			}
		},
		onPullDownRefresh() { //下拉刷新
			this.init()
		},
		async onReachBottom() { //上拉加载更多
			if (this.current >= this.pages) return//如果当前页到最后一页停止加载
			
			this.status = 'loading'
			this.current++
			this.$refs.loading.showLoading() // 显示
			let res = await this.API_leaderlist(this.dateRange.sday,this.dateRange.eday,this.current,this.type);
			if (res.data.code === 1000) {
				let orderList = res.data.data.leaderlist.records //获取订单
				this.records.push(...orderList)
				if(this.current >= this.pages) this.status = 'nomore'
				else this.status = 'loading'
			}
			this.$refs.loading.hideLoading() // 隐藏
		},
	};
</script>

<style lang="scss" scoped>
	page{
		height: 100%;
	}
	.billSummary {
		height: 100%;

		.order{
			padding-bottom: 350rpx;
		}

		.orderCard {
			//订单卡片
			border-bottom: 8px solid #f8f2f2;

			.orderHeader {
				//订单卡片头部
				border-bottom: 1px solid #f0f0f0;
				padding: 10rpx;
				box-sizing: border-box;

				.orderHeaderItem {
					//订单卡片头部选项
					padding: 5px 0 5px 10px;
				}

				.btns {
					//按钮
					display: flex;
					justify-content: flex-end;

					.btn {
						margin: 0 10rpx;
					}
				}
			}

			.orderContainer {
				//订单卡片内容
				padding: 20rpx;
				box-sizing: border-box;

				.orderList {
					//订单列表
					display: flex;
					margin: 10rpx 0;

					// 图片
					.img {
						width: 240rpx;
						height: 180rpx;
						overflow: hidden;
						border-radius: 30rpx;
						margin-right: 10rpx;
					}

					// 内容区
					.orderListBox {
						flex: 1;

						// 标题
						.orderListTitle {
							font-size: 28rpx;
						}

						// 成员
						.orderListItem {
							font-size: 24rpx;
							color: #82848A;
						}
					}

				}
			}
		}

		// 空空如也
		.empty {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
		}
		
		// 总计
		.total{
			position: fixed;
			z-index: 9999;
			width: 100%;
			height: 200rpx;
			left: 0;
			bottom: 0;
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;
			border: 1px solid;
			background: #fff;
			overflow: hidden;
			padding: 40rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			.totalItem{
				font-size: 36rpx;
			}
		}
	}
</style>
